import { useEffect, useState } from 'react'
import '../index.css'
import store from './redux/store';
import ProfileSetting from './ProfileSetting'

export default function User() {
    return <>
        <Header />
        <Setting />
        <Summary />
    </>;
}

function Setting(props) {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting />
            其它设置 <br />
            消息通知设置...

        </div>
    );
}

function Summary() {
    return <p>
        没有把所有的都改造为class组件，只对ProfileSetting进行了改造 <br />
        总结： <br />
        优点：<br />
        1. 在store和UI组件之间来了个中间层，好不影响UI组件的使用，这在重构代码上增加了非常大的便利<br />
        缺点：<br />
        1. class组件还是太罗嗦 <br />
        2. 组件订阅还是很麻烦很容易出错哦。试试函数组件hook吧 ~
    </p>
}


export function Header() {
    // 只有这两个状态更新，才会render, 但是还是要去订阅，销毁订阅
    const [username, setUsername] = useState(store.getState().username);
    const [unReadCount, setUnReadCount] = useState(store.getState().unReadCount);
    useEffect(() => {
        const unsubscribe = store.subscribe(() => {
            setUsername(store.getState().username);
            setUnReadCount(store.getState().unReadCount);
        })
        return () => {
            unsubscribe();
        }
    }, []);


    return (
        <div className='header'>
            <span>{username}</span>

            <span className='un-read'>
                未读
                <div className='un-read-num'>{unReadCount}</div>
            </span>
        </div>
    )
}